<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <title>小朋友签到页面</title>
        <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css">
        <style>
            body{background-color:#eee;}
            form{padding:5px;}
        </style>
    </head>
    <body>
        
        <header data-am-widget="header" class="am-header am-header-default">
            <h1 class="am-header-title">
                <a href="#title-link" class="">
                    小朋友签到表
                </a>
            </h1>
        </header>
        
        <p align="center" id="loading">
            <i class="am-icon-spinner am-icon-pulse"></i>
            努力寻找用户信息！
        </p>
        
        <p align="center" id="loaded"></p>
        
        <form class="am-form">
            <div class="am-form-group">
                <label for="username">学号</label>
                <input type="number" class="" id="username" placeholder="学号" onchange="saveUser(this);">
            </div>
            <div class="am-form-group">
                <label for="code">签到码</label>
                <input type="text" class="" id="code" placeholder="签到码">
            </div>
       </form>
        
        <p align="center">
            <button type="button" class="am-btn am-btn-success" onclick="sign();">签到</button>
        </p>
        
        <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示</div>
    <div class="am-modal-bd" id="alertMessage">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>
        
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>
        <script>
        
            $(document).ready(function(){
                //加载保存的学号
                if(window.localStorage){
                    $("#username").val(localStorage['signApp_studyNumber']);
                }
                //判断是否需要拉取用户信息
                if($("#username").val() == ""){
                    $("#loading").hide();
                    $("#loaded").hide();
                }else{
                    getUserMessage();
                }
            });
        
            function saveUser(obj){
                if(window.localStorage){
                    localStorage['signApp_studyNumber'] = obj.value;
                }
                getUserMessage();
            }
            
            function getUserMessage(){
                $("#loaded").hide();
                $("#loading").show();
                $.AMUI.progress.inc();
                var styudyNumber = $("#username").val();
                var token = getQueryString("token");
                $.post("/childrenMessage", {"styudyNumber": styudyNumber, "token": token}, function(obj){
                    $("#loaded").html(obj['message']);
                    $("#loaded").show();
                    $("#loading").hide();
                    $.AMUI.progress.done(true);
                });
            }
            
            function getQueryString(name) { 
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
                var r = window.location.search.substr(1).match(reg); 
                if (r != null) return unescape(r[2]); return null; 
            } 
            
            function sign(){
                var styudyNumber = $("#username").val();
                var code = $("#code").val();
                var token = getQueryString("token");
                
                if(code.length != 4){
                    $("#alertMessage").html("签到码格式不正确！");
                    $('#my-alert').modal("open");
                }else if(styudyNumber == ""){
                    $("#alertMessage").html("学号不能为空！");
                    $('#my-alert').modal("open");
                }else{
                    $.AMUI.progress.done(true);
                    $.AMUI.progress.inc();
                    $.post("/sign", {"styudyNumber": styudyNumber, "token": token, "code": code}, function(obj){
                        $.AMUI.progress.done(true);
                        
                        if(obj['code'] == 0){
                            location.href = "/childrenSignUi?token=" + token;
                        }else if (obj['code'] == 1){
                            $("#alertMessage").html("签到码错误！");
                            $('#my-alert').modal("open");
                        }else if (obj['code'] == 2){
                            $("#alertMessage").html("签到已经过期！");
                            $('#my-alert').modal("open");
                        }else if (obj['code'] == 3){
                            $("#alertMessage").html("你都已经签到过了～！");
                            $('#my-alert').modal("open");
                        }
                        
                    });
                }
                
            }
            
        </script>
    </body>
</html>
